import {
  Button,
  Divider,
  message,
  Input,
  Drawer,
  Table,
  Tabs,
  Card,
  Modal,
  AutoComplete,
  Form,
  Select,
  Popconfirm,
} from 'antd';
import React, { useState, useRef } from 'react';
const { Search } = Input;
import { FormattedMessage, history, Link } from 'umi';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { getGroupList } from '../NameSpace/service';
import { getImageList, deleteImage } from './service';
import { harborRequest } from '@/utils/request';
import { SORTS } from '@/utils/const';
import '@/assets/css/table.less';
import ImageUpload from './components/upload';
import ImagePull from './components/pull';
import ImageServer from './components/server';
import format from '@/utils/format';
import ATable from '@apulis/table';
import { AuthzHOC } from '@apulis/authz';

const Harbor = (props) => {
  const [tab, setTab] = useState(props.location.query.tab);
  const [showPull, setShowPull] = useState(false);
  const [nameSpace, setNameSpace] = useState([]);
  const [searchText, setSearch] = useState('');

  const columns = [
    {
      title: React.$i18n('镜像名称'),
      dataIndex: 'imageName',
      render: (text, row) => {
        return <Link to={`/imageDetail?id=${row.id}`}>{text}</Link>;
      },
    },
    {
      title: React.$i18n('来源'),
      dataIndex: 'source',
      render: (text) => {
        let t_list = text.split(',')
        let new_t_list = []
        t_list.forEach(e=>{
          new_t_list.push({
            PUSHBYUSER: '用户上传',
            UPLOADFROMUSERPAGE: '页面上传',
            UPLOADFROMCLOUD: '云端拉取',
          }[e])
        })

        t_list = new_t_list.join(',')

        return t_list;
      },
    },
    {
      title: React.$i18n('版本数'),
      dataIndex: 'versionCount',
    },
    // {
    //   title: React.$i18n('所属用户组'),
    //   dataIndex: 'groupName',
    // },
    {
      title: React.$i18n('创建人'),
      dataIndex: 'creator',
    },
    {
      title: React.$i18n('更新时间'),
      dataIndex: 'updateAt',
      render: (text) => format(text),
      sorter: true,
      // sorter: (a, b) => a.createAt - b.createAt,
    },
    {
      title: React.$i18n('操作'),
      render(text, record) {
        return (
          <>
            <AuthzHOC permission="/apharbor/api/v1/images/image/{id}" action={['delete']}>
              <Popconfirm
                title="确认删除?"
                onConfirm={() => {
                  deleteImage(record.id).then((res) => {
                    ref.current.reload();
                  });
                }}
                okText="是"
                cancelText="否"
              >
                <a style={{ color: 'red' }} type="text">
                  删除
                </a>
              </Popconfirm>
            </AuthzHOC>
          </>
        );
      },
    },
  ];

  function onSearch() {}

  const ref = React.useRef();
  const uploadRef = React.useRef();
  const pullRef = React.useRef();
  const serverRef = React.useRef();
  return (
    <div className="name-space">
      <PageContainer>
        <Card bodyStyle={{ padding: '0 16px' }}>
          <ProTable
            className="left-toolbar"
            options={false}
            actionRef={ref}
            search={false}
            rowKey={(r) => r.id}
            cardProps={{
              bodyStyle: { padding: 0 },
            }}
            sort
            request={async (params, sorter, filter) => {
              console.log(sorter);
              console.log('p', params);
              const sorterStr = sorter.updateAt ? `updateAt|${SORTS.get(sorter.updateAt)}` : ''
              let d = {
                pageNum: params.current,
                pageSize: params.pageSize,
                sort: sorterStr
                // type:"user"
              }
              console.log(d);
              if(searchText){
                d.searchName = searchText
              }
              const res = await getImageList(d);
              if (res.code === 0) {
                return {
                  data: res.data.items,
                  success: true,
                  total: res.data.total,
                };
              }
            }}
            toolBarRender={() => [
              <div style={{ display: 'flex', width: '100%' }}>
                <AuthzHOC permission="/apharbor/api/v1/images/image" action={['post']}>
                  <Button
                    type="primary"
                    onClick={() => {
                      uploadRef.current.open();
                    }}
                    style={{ marginRight: '10px' }}
                  >
                    页面上传
                  </Button>
                  <Button
                    type="primary"
                    onClick={() => {
                      pullRef.current.open();
                    }}
                    style={{ marginRight: '10px' }}
                  >
                    云端拉取
                  </Button>
                  <Button
                    type="primary"
                    onClick={() => {
                      serverRef.current.open();
                    }}
                    style={{ marginRight: '10px' }}
                  >
                    客户端上传
                  </Button>
                  <Search
                    placeholder="请输入搜索名称"
                    onChange={(e) => {
                      setSearch(e.target.value);
                    }}
                    onSearch={(e) => {
                      ref.current.reload();
                    }}
                    enterButton
                    allowClear
                    style={{ marginLeft: 'auto' }}
                  />
                  </AuthzHOC>
              </div>,
            ]}
            columns={columns}
          />
        </Card>
      </PageContainer>
      <ImageUpload
        ref={uploadRef}
        success={() => {
          ref.current.reload();
        }}
      />
      <ImagePull
        ref={pullRef}
        success={() => {
          ref.current.reload();
        }}
      />
      <ImageServer
        type='user'
        ref={serverRef}
        success={() => {
          ref.current.reload();
        }}
      ></ImageServer>
    </div>
  );
};

export default Harbor;
